﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <h1>Canvas</h1>
    <br />
    <button onclick="canvasFillColor()">Fill color</button>
    <button onclick="canvasLine()" >Draw line</button>
    <button onclick="cCircle()" >Circle</button>
    <button onclick="cText()" >Text</button>
    <button onclick="canvasReset()" >Reset</button>
    <br />
    <br />
    <canvas id="myCanvas" width="200" height="100" style="border: 1px solid #000000;"></canvas>
    <footer >
        <br />
        <a href="Index.html"><small>Go to menu</small></a>
        <br />
    </footer>
</body>
<script>
    var s = "border: 1px solid #000000;";
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.save();
    
    function canvasFillColor() {
        
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, 150, 75);
    }
    function canvasLine() {
        ctx.moveTo(0, 0);
        ctx.lineTo(200, 100);
        ctx.stroke();
    }
    function cCircle() {
        ctx.beginPath();
        ctx.arc(95, 50, 40, 0, 2 * Math.PI);
        ctx.stroke();
    }
    function cText() {
        ctx.font = "30px Arial";
        ctx.fillText("Hello World", 10, 50);
        ctx.strokeText("Hello World", 10, 80);

    }
        

    function canvasReset() {
        ctx.style = s;
    }


</script>
</html>
